<template>
    <div style="min-width: 829px">
        <div v-if="$route.path == '/skuDetailReport'">
            <div class="vs-search-box">
                <el-tabs v-search-box-enter v-model="active" @tab-click="handleClick">
                    <el-tab-pane label="毛坯" name="0">
                        <el-form ref="form" :inline="true" :model="paging">
                            <!-- <el-form-item label="仓库名称：">
                                <el-select style="width:150px" clearable v-model="paging.warehouse_id" placeholder="请选择" @change="changeWarehouse(paging.warehouse_id)">
                                    <el-option v-for="item in warehouseList" :key="item.id" :label="item.title" :value="item.id"> </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="库位名称：">
                                <el-select style="width:150px" clearable v-model="paging.stock_area_code" placeholder="请选择">
                                    <el-option v-for="item in warehouseLocationList" :key="item.id" :label="item.title" :value="item.id"> </el-option>
                                </el-select>
                            </el-form-item> -->
                            <el-form-item label="商品类型：">
                                <el-select style="width: 150px" clearable v-model="paging.roughcast_type"
                                    placeholder="请选择">
                                    <el-option label="标准毛坯" value="1"> </el-option>
                                    <el-option label="定制毛坯" value="2"> </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="商品系列：">
                                <el-input v-model="paging.goods_name" style="width: 200px" placeholder="请输入商品系列"
                                    clearable>
                                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="商品编码：">
                                <el-input v-model="paging.number" style="width: 200px" placeholder="请输入商品编码" clearable>
                                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="查询时间段：">
                                <el-date-picker v-model="bill_time_start" type="daterange" format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd" start-placeholder="开始时间" end-placeholder="结束时间"
                                    style="width: 300px"> </el-date-picker>
                            </el-form-item>
                            <el-form-item label="" class="vs-right-btns">
                                <el-button @click="reset">重置</el-button>
                                <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                            </el-form-item>
                            <el-form-item style="margin-left: 30px">
                                <el-checkbox v-model="paging.stock" :true-label="1" :false-label="0">只显示有库存商品
                                </el-checkbox>
                                <el-checkbox v-model="paging.early_warning_count" :true-label="1" :false-label="0">
                                    低于预警值商品</el-checkbox>
                            </el-form-item>
                            <el-form-item label="毛坯种类：">
                                <el-select style="width: 150px" clearable v-model="paging.roughcast" placeholder="请选择">
                                    <el-option v-for="item in options.blank_type" :key="item.id" :label="item.title"
                                        :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="递针类型：">
                                <el-select style="width: 150px" clearable v-model="paging.needle" placeholder="请选择">
                                    <el-option v-for="item in options.needle_type" :key="item.id" :label="item.title"
                                        :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="尺寸：">
                                <el-select style="width: 150px" clearable v-model="paging.size" placeholder="请选择">
                                    <el-option v-for="item in options.size" :key="item.id" :label="item.title"
                                        :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="长度：">
                                <el-select style="width: 150px" clearable v-model="paging.length" placeholder="请选择">
                                    <el-option v-for="item in options.length" :key="item.id" :label="item.title"
                                        :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="性别：">
                                <el-select style="width: 150px" clearable v-model="paging.sex" placeholder="请选择">
                                    <el-option v-for="item in options.sex" :key="item.id" :label="item.title"
                                        :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="颜色：">
                                <el-select style="width: 150px" clearable v-model="paging.colour" placeholder="请选择">
                                    <el-option v-for="item in options.colour" :key="item.id" :label="item.title"
                                        :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="定制成品" name="1">
                        <el-form ref="form" :inline="true" :model="paging" label-width="110px">
                            <!-- <el-form-item label="仓库名称：">
                                <el-select style="width:150px" clearable v-model="paging.warehouse_id" placeholder="请选择" @change="changeWarehouse(paging.warehouse_id)">
                                    <el-option v-for="item in warehouseList" :key="item.id" :label="item.title" :value="item.id"> </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="库位名称：">
                                <el-select style="width:150px" clearable v-model="paging.stock_area_code" placeholder="请选择">
                                    <el-option v-for="item in warehouseLocationList" :key="item.id" :label="item.title" :value="item.id"> </el-option>
                                </el-select>
                            </el-form-item> -->
                            <el-form-item label="商品系列：">
                                <el-input v-model="paging.goods_name" style="width: 200px" placeholder="请输入商品系列"
                                    clearable>
                                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="商品编码：">
                                <el-input v-model="paging.number" style="width: 200px" placeholder="请输入商品编码" clearable>
                                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="查询时间段：">
                                <el-date-picker v-model="bill_time_start" type="daterange" format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd" start-placeholder="开始时间" end-placeholder="结束时间"
                                    style="width: 300px"> </el-date-picker>
                            </el-form-item>
                            <el-form-item label="" class="vs-right-btns">
                                <el-button @click="reset">重置</el-button>
                                <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                            </el-form-item>
                            <el-form-item style="margin-left: 30px">
                                <el-checkbox v-model="paging.stock" :true-label="1" :false-label="0">只显示有库存商品
                                </el-checkbox>
                                <el-checkbox v-model="paging.early_warning_count" :true-label="1" :false-label="0">
                                    低于预警值商品</el-checkbox>
                            </el-form-item>
                            <el-form-item label="毛坯种类：">
                                <el-select style="width: 150px" clearable v-model="paging.roughcast" placeholder="请选择">
                                    <el-option v-for="item in options.blank_type" :key="item.id" :label="item.title"
                                        :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="递针类型：">
                                <el-select style="width: 150px" clearable v-model="paging.needle" placeholder="请选择">
                                    <el-option v-for="item in options.needle_type" :key="item.id" :label="item.title"
                                        :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="尺寸：">
                                <el-select style="width: 150px" clearable v-model="paging.size" placeholder="请选择">
                                    <el-option v-for="item in options.size" :key="item.id" :label="item.title"
                                        :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="长度：">
                                <el-select style="width: 150px" clearable v-model="paging.length" placeholder="请选择">
                                    <el-option v-for="item in options.length" :key="item.id" :label="item.title"
                                        :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="性别：">
                                <el-select style="width: 150px" clearable v-model="paging.sex" placeholder="请选择">
                                    <el-option v-for="item in options.sex" :key="item.id" :label="item.title"
                                        :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="颜色：">
                                <el-select style="width: 150px" clearable v-model="paging.colour" placeholder="请选择">
                                    <el-option v-for="item in options.colour" :key="item.id" :label="item.title"
                                        :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="标准成品" name="5">
                        <el-form ref="form" :inline="true" :model="paging" label-width="110px">
                            <!-- <el-form-item label="仓库名称：">
                                <el-select style="width:150px" clearable v-model="paging.warehouse_id" placeholder="请选择" @change="changeWarehouse(paging.warehouse_id)">
                                    <el-option v-for="item in warehouseList" :key="item.id" :label="item.title" :value="item.id"> </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="库位名称：">
                                <el-select style="width:150px" clearable v-model="paging.stock_area_code" placeholder="请选择">
                                    <el-option v-for="item in warehouseLocationList" :key="item.id" :label="item.title" :value="item.id"> </el-option>
                                </el-select>
                            </el-form-item> -->
                            <el-form-item label="商品系列：">
                                <el-input v-model="paging.goods_name" style="width: 200px" placeholder="请输入商品系列"
                                    clearable>
                                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="商品编码：">
                                <el-input v-model="paging.number" style="width: 200px" placeholder="请输入商品编码" clearable>
                                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="标准成品类型：" prop="sex_type">
                                <el-select style="width: 200px" v-model="paging.sex_type" @change="styleChange"
                                    placeholder="请选择">
                                    <el-option label="男款" :value="353"> </el-option>
                                    <el-option label="女款" :value="354"> </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="查询时间段：">
                                <el-date-picker v-model="bill_time_start" type="daterange" format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd" start-placeholder="开始时间" end-placeholder="结束时间"
                                    style="width: 300px"> </el-date-picker>
                            </el-form-item>
                            <el-form-item label="" class="vs-right-btns">
                                <el-button @click="reset">重置</el-button>
                                <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                            </el-form-item>
                            <el-form-item style="margin-left: 30px">
                                <el-checkbox v-model="paging.stock" :true-label="1" :false-label="0">只显示有库存商品
                                </el-checkbox>
                                <el-checkbox v-model="paging.early_warning_count" :true-label="1" :false-label="0">
                                    低于预警值商品</el-checkbox>
                            </el-form-item>
                            <el-form-item label="款号：" prop="item">
                                <el-select style="width: 200px" clearable v-model="paging.item" placeholder="请选择">
                                    <el-option v-for="item in options.item" :key="item.id" :label="item.title"
                                        :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="毛坯种类：" prop="roughcast">
                                <el-select style="width: 200px" clearable v-model="paging.roughcast" placeholder="请选择">
                                    <el-option v-for="item in options.roughcast" :key="item.id" :label="item.title"
                                        :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="颜色：" prop="colour">
                                <el-select style="width: 200px" clearable v-model="paging.colour" placeholder="请选择">
                                    <el-option v-for="item in options.colour" :key="item.id" :label="item.title"
                                        :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="尺寸：" prop="size">
                                <el-select style="width: 200px" clearable v-model="paging.size" placeholder="请选择">
                                    <el-option v-for="item in options.size" :key="item.id" :label="item.title"
                                        :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="积分商品" name="2">
                        <el-form ref="form" :inline="true" :model="paging" label-width="110px">
                            <!-- <el-form-item label="仓库名称：">
                                <el-select style="width:150px" clearable v-model="paging.warehouse_id" placeholder="请选择" @change="changeWarehouse(paging.warehouse_id)">
                                    <el-option v-for="item in warehouseList" :key="item.id" :label="item.title" :value="item.id"> </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="库位名称：">
                                <el-select style="width:150px" clearable v-model="paging.stock_area_code" placeholder="请选择">
                                    <el-option v-for="item in warehouseLocationList" :key="item.id" :label="item.title" :value="item.id"> </el-option>
                                </el-select>
                            </el-form-item> -->
                            <el-form-item label="商品系列：">
                                <el-input v-model="paging.goods_name" style="width: 200px" placeholder="请输入商品系列"
                                    clearable>
                                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="商品编码：">
                                <el-input v-model="paging.number" style="width: 200px" placeholder="请输入商品编码" clearable>
                                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="查询时间段：">
                                <el-date-picker v-model="bill_time_start" type="daterange" format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd" start-placeholder="开始时间" end-placeholder="结束时间"
                                    style="width: 300px"> </el-date-picker>
                            </el-form-item>
                            <el-form-item style="margin-left: 30px">
                                <el-checkbox v-model="paging.stock" :true-label="1" :false-label="0">只显示有库存商品
                                </el-checkbox>
                                <el-checkbox v-model="paging.early_warning_count" :true-label="1" :false-label="0">
                                    低于预警值商品</el-checkbox>
                            </el-form-item>
                            <el-form-item label="" class="vs-right-btns">
                                <el-button @click="reset">重置</el-button>
                                <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="洗护用品" name="3">
                        <el-form ref="form" :inline="true" :model="paging" label-width="110px">
                            <!-- <el-form-item label="仓库名称：">
                                <el-select style="width:150px" clearable v-model="paging.warehouse_id" placeholder="请选择" @change="changeWarehouse(paging.warehouse_id)">
                                    <el-option v-for="item in warehouseList" :key="item.id" :label="item.title" :value="item.id"> </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="库位名称：">
                                <el-select style="width:150px" clearable v-model="paging.stock_area_code" placeholder="请选择">
                                    <el-option v-for="item in warehouseLocationList" :key="item.id" :label="item.title" :value="item.id"> </el-option>
                                </el-select>
                            </el-form-item> -->
                            <el-form-item label="商品系列：">
                                <el-input v-model="paging.goods_name" style="width: 200px" placeholder="请输入商品系列"
                                    clearable>
                                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="商品编码：">
                                <el-input v-model="paging.number" style="width: 200px" placeholder="请输入商品编码" clearable>
                                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="查询时间段：">
                                <el-date-picker v-model="bill_time_start" type="daterange" format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd" start-placeholder="开始时间" end-placeholder="结束时间"
                                    style="width: 300px"> </el-date-picker>
                            </el-form-item>
                            <el-form-item style="margin-left: 30px">
                                <el-checkbox v-model="paging.stock" :true-label="1" :false-label="0">只显示有库存商品
                                </el-checkbox>
                                <el-checkbox v-model="paging.early_warning_count" :true-label="1" :false-label="0">
                                    低于预警值商品</el-checkbox>
                            </el-form-item>
                            <el-form-item label="" class="vs-right-btns">
                                <el-button @click="reset">重置</el-button>
                                <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="其他" name="4">
                        <el-form ref="form" :inline="true" :model="paging" label-width="110px">
                            <!-- <el-form-item label="仓库名称：">
                                <el-select style="width:150px" clearable v-model="paging.warehouse_id" placeholder="请选择" @change="changeWarehouse(paging.warehouse_id)">
                                    <el-option v-for="item in warehouseList" :key="item.id" :label="item.title" :value="item.id"> </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="库位名称：">
                                <el-select style="width:150px" clearable v-model="paging.stock_area_code" placeholder="请选择">
                                    <el-option v-for="item in warehouseLocationList" :key="item.id" :label="item.title" :value="item.id"> </el-option>
                                </el-select>
                            </el-form-item> -->
                            <el-form-item label="商品系列：">
                                <el-input v-model="paging.goods_name" style="width: 200px" placeholder="请输入商品系列"
                                    clearable>
                                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="商品编码：">
                                <el-input v-model="paging.number" style="width: 200px" placeholder="请输入商品编码" clearable>
                                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="查询时间段：">
                                <el-date-picker v-model="bill_time_start" type="daterange" format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd" start-placeholder="开始时间" end-placeholder="结束时间"
                                    style="width: 300px"> </el-date-picker>
                            </el-form-item>
                            <el-form-item style="margin-left: 30px">
                                <el-checkbox v-model="paging.stock" :true-label="1" :false-label="0">只显示有库存商品
                                </el-checkbox>
                                <el-checkbox v-model="paging.early_warning_count" :true-label="1" :false-label="0">
                                    低于预警值商品</el-checkbox>
                            </el-form-item>
                            <el-form-item label="" class="vs-right-btns">
                                <el-button @click="reset">重置</el-button>
                                <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <div class="vs-table-box">
                <div class="operation-box clear-float">
                    <el-button v-if="utils.getIsShopowner()" @click="exportFn" icon="el-icon-download" type="primary">导出
                    </el-button>
                </div>
                <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table"
                    style="width: 100%" border :key="active" show-summary v-if="active == 0 || active == 1"
                    @sort-change="sortChange" :summary-method="getSummaries">
                    <el-table-column prop="id" label="序号" align="center"></el-table-column>
                    <el-table-column prop="number" label="商品编码" min-width="110" align="center"></el-table-column>
                    <el-table-column prop="out_trade_no" label="商品分类" align="center">
                        <template slot-scope="scope">
                            <div v-if="active == 0">{{
                                scope.row.roughcast_type == 1 ? '标准毛坯' : scope.row.roughcast_type
                                    == 2 ? '定制毛坯' : ''
                            }}</div>
                            <div v-else>{{
                                scope.row.roughcast_type == 1 ? '标准成品' : scope.row.roughcast_type == 2 ?
                                    '定制成品' : ''
                            }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="goods_name" label="商品系列" align="center"></el-table-column>
                    <el-table-column prop="roughcast" label="毛坯种类" align="center"></el-table-column>
                    <el-table-column prop="needle" label="递针类型" align="center"></el-table-column>
                    <el-table-column prop="size" label="尺寸" align="center"></el-table-column>
                    <el-table-column prop="sex" label="性别" align="center"></el-table-column>
                    <el-table-column prop="length" label="长度" align="center"></el-table-column>
                    <el-table-column prop="colour" label="颜色" align="center"></el-table-column>
                    <el-table-column v-if="utils.getIsShopowner()" key="123" prop="price" label="采购价" align="center">
                    </el-table-column>
                    <el-table-column v-if="utils.getIsShopowner()" prop="trade_price" label="批发价"
                        align="center"></el-table-column>
                    <el-table-column prop="sale_price" label="零售价" align="center"></el-table-column>
                    <el-table-column prop="early_warning_count" label="库存预警值" sortable align="center" width="120">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.early_warning_count" placeholder="" @blur="blur(scope.row)">
                            </el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="count" label="库存数量" sortable align="center" width="120"> </el-table-column>
                    <el-table-column fixed="right" width="160" label="操作" align="center">
                        <template slot-scope="scope">
                            <span @click="setRow(scope.row)" class="tab-table-text">变更明细</span>
                        </template>
                    </el-table-column>
                </el-table>
                <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table"
                    style="width: 100%" border :key="active + 2" show-summary v-else-if="active == 5"
                    @sort-change="sortChange" :summary-method="getSummaries">
                    <el-table-column prop="id" label="序号" align="center"></el-table-column>
                    <el-table-column prop="number" label="商品编码" min-width="110" align="center"></el-table-column>
                    <el-table-column prop="goods_name" label="商品系列" align="center"></el-table-column>
                    <el-table-column prop="sex_type" label="标准成品类型" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.sex_type == 353 ? '男款' : scope.row.roughcast_type == 354 ? '女款' : '' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="roughcast" label="毛坯种类" align="center"></el-table-column>
                    <el-table-column prop="item" label="款号" align="center"></el-table-column>
                    <el-table-column prop="size" label="尺寸" align="center"></el-table-column>
                    <el-table-column prop="colour" label="颜色" align="center"></el-table-column>
                    <el-table-column prop="trade_price" label="批发价" align="center"></el-table-column>
                    <el-table-column prop="sale_price" label="零售价" align="center"></el-table-column>
                    <el-table-column prop="early_warning_count" label="库存预警值" sortable align="center" width="120">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.early_warning_count" placeholder="" @blur="blur(scope.row)">
                            </el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="count" label="库存数量" sortable align="center" width="120"> </el-table-column>
                    <el-table-column fixed="right" width="160" label="操作" align="center">
                        <template slot-scope="scope">
                            <span @click="setRow(scope.row)" class="tab-table-text">变更明细</span>
                        </template>
                    </el-table-column>
                </el-table>
                <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table" show-summary
                    style="width: 100%" border :key="active + 1" v-else :summary-method="getSummaries">
                    <el-table-column prop="id" label="序号" align="center"></el-table-column>
                    <el-table-column prop="number" label="商品编码" align="center"></el-table-column>
                    <el-table-column prop="title" label="商品系列" align="center"></el-table-column>
                    <el-table-column prop="sku_text" label="规格" align="center"></el-table-column>
                    <el-table-column prop="unit" label="单位" align="center"></el-table-column>
                    <el-table-column prop="price" v-if="utils.getIsShopowner()" key="12" label="采购价" align="center">
                    </el-table-column>
                    <el-table-column prop="trade_price" label="批发价" align="center"></el-table-column>
                    <el-table-column prop="sale_price" label="零售价" align="center"></el-table-column>
                    <el-table-column prop="early_warning_count" label="库存预警值" sortable align="center" width="120">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.early_warning_count" placeholder="" @blur="blur(scope.row)">
                            </el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="count" label="库存数量" sortable align="center" width="120"> </el-table-column>
                    <el-table-column fixed="right" width="160" label="操作" align="center">
                        <template slot-scope="scope">
                            <span @click="setRow(scope.row)" class="tab-table-text">变更明细</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="vs-paging-box">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :page-sizes="[100, 200, 500, 1000]" :current-page.sync="paging.page" :page-size="paging.limit"
                        layout="total, sizes, prev, pager, next, jumper" :total="paging.total"> </el-pagination>
                </div>
            </div>
        </div>
        <router-view></router-view>
        <el-dialog title="变更明细" :visible.sync="dialogTableVisible" center>
            <el-table :data="gridData" border :max-height="500">
                <el-table-column type="index" label="序号" align="center" width="80"></el-table-column>
                <el-table-column prop="name" label="变更方式" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.flag == 'in' ? '入库' : '出库' }}
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="变更类型" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.flag == 'in'">
                            {{ scope.row.type | inTypeFilters }}
                        </div>
                        <div v-else>
                            {{ scope.row.type | outTypeFilters }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="ticket_code" label="变更单号" align="center"></el-table-column>
                <el-table-column prop="count" label="变更数量" align="center"></el-table-column>
                <el-table-column prop="address" label="单据日期" align="center">
                    <template slot-scope="scope">
                        {{ $moment(scope.row.create_time * 1000).format('YYYY-MM-DD') }}
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="变更时间" align="center">
                    <template slot-scope="scope">
                        {{ $moment(scope.row.update_time * 1000).format('YYYY-MM-DD HH:mm') }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <span @click="setRow1(scope.row)" class="tab-table-text">详情</span>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogTableVisible: false,
            gridData: [],
            loading: false,
            bill_time_start: [],
            paging: {
                roughcast_type: '',
                // stock_area_code: "",
                // warehouse_id: '',
                goods_name: '',
                number: '',
                stock: 0,
                early_warning_count: 0,
                roughcast: '',
                needle: '',
                size: '',
                length: '',
                colour: '',
                sex: '',
                page: 1,
                total: 0,
                limit: 100,
                store_id: JSON.parse(localStorage.getItem('userInfo')).store_id,
                item: '',
                sex_type: '',
            },
            tableData: [],
            active: 0,
            warehouseList: [],
            warehouseLocationList: [],
            options: {
                blank_type: [],
                needle_type: [],
                size: [],
                length: [],
                sex: [],
                colour: [],
                roughcast: [],
                item: [],
            },
        };
    },
    filters: {
        inTypeFilters(val) {
            switch (val) {
                case 1:
                    return '要货入库';
                case 2:
                    return '调拨入库';
                case 3:
                    return '积分商城入库';
            }
        },
        outTypeFilters(val) {
            switch (val) {
                case 1:
                    return '销售出库';
                case 2:
                    return '领用出库';
                case 3:
                    return '调拨出库';
                case 4:
                    return '积分商品出库';
                case 5:
                    return '订单出库';
            }
        },
    },
    created() {
        if (this.$route.path == '/skuDetailReport') {
            this.handleCurrentChange(1);
            // this.getWarehouseList()
            this.getGoodsCategory();
        }
    },
    methods: {
        styleChange() {
            this.getGoodsCategoryCheng2();
            this.paging.item = "";
            this.paging.roughcast = "";
            this.paging.colour = "";
            this.paging.size = "";
            this.handleCurrentChange(1)
        },
        async getGoodsCategoryCheng2() {
            //查询标准成品分类类型
            let { code, data } = await this.$Http.getGoodsCategoryCheng({ sex_type: this.paging.sex_type });
            if (code) {
                let { size, colour, roughcast, item } = data;
                this.options = { size, roughcast, item, colour };
            }
        },
        // 导出
        async exportFn() {
            if (!this.bill_time_start) {
                this.bill_time_start = [];
            }
            this.paging.type = this.active * 1 + 1;
            this.paging.start_time = this.bill_time_start[0] || '';
            this.paging.end_time = this.bill_time_start[1] || '';
            let obj = Object.assign({}, this.paging);
            let url = this.utils.data.baseURL + 'store/stock/storeStockListExport';
            this.utils.urlToBlob(url, '商品库存明细', obj);
        },
        async blur(row) {
            let { code, data } = await this.$Http.editEarlyWarningCount({ id: row.id, count: row.early_warning_count });
            if (code) {
                this.$message.success('修改成功!');
                this.handleCurrentChange(1);
            }
        },
        // 获取分类
        async getGoodsCategory() {
            this.options.blank_type = this.options.needle_type = this.options.size = this.options.length = this.options.sex = this.options.colour = this.options.roughcast = this.options.item = [];
            if (this.active != 5) {
                let { code, data } = await this.$Http.getGoodsCategoryList({ special_type: this.active * 1 + 1 });
                if (code) {
                    let { blank_type, needle_type, size, length, sex, colour } = data;
                    this.options = { blank_type, needle_type, size, length, sex, colour };
                }
            } else {
                this.paging.sex_type = 353;
                this.getGoodsCategoryCheng2();
            }
        },
        // //改变仓库
        // changeWarehouse(id) {
        //     this.paging.stock_area_code = ''
        //     this.getWarehouseLocationById(id)
        // },
        // //根据仓库id获取库位列表
        // async getWarehouseLocationById(id) {
        //     this.loading = true;
        //     let { code, data } = await this.$Http.getWarehouseLocationById_common({ id });
        //     this.loading = false;
        //     if (code) {
        //         this.warehouseLocationList = data
        //     }
        // },
        // //获取仓库列表
        // async getWarehouseList() {
        //     this.loading = true;
        //     let { code, data } = await this.$Http.getWarehouseList_common();
        //     this.loading = false;
        //     if (code) {
        //         this.warehouseList = data
        //     }
        // },
        //排序
        sortChange(column) {
            console.log(column);
            // this.form.sort = column.prop
            // this.form.sort_type = column.order == 'ascending' ? 'up' : 'down'
            // this.getHouseList()
        },
        handleClick(tab, event) {
            this.reset();
            this.getGoodsCategory();
        },
        async setRow(row) {
            console.log(row, '1111');
            await this.stockReportInfo(row.goods_id, row.store_id);
            this.dialogTableVisible = true;
        },
        async stockReportInfo(id, store_id) {
            this.loading = true;
            let { code, data } = await this.$Http.stockReportInfo({ goods_id: id, store_id: store_id });
            this.loading = false;
            if (code) {
                for (let i in data.in_arr) {
                    this.$set(data.in_arr[i], 'flag', 'in');
                }
                for (let i in data.out_arr) {
                    this.$set(data.out_arr[i], 'flag', 'out');
                }
                this.gridData = data.in_arr.concat(data.out_arr);
            }
        },
        async setRow1(row) {
            this.dialogTableVisible = false;
            console.log(row);
            if (row.flag == 'in') {
                // type 1 要货单详情  type 2调拨详情,type 3 积分详情
                if (row.type == 1) {
                    this.utils.goUrl('/demandInfo?id=' + row.relation_id);
                } else if (row.type == 2) {
                    this.utils.goUrl('/goodsAllotInfo?id=' + row.relation_id);
                }
                if (row.type == 3) {
                    this.utils.goUrl('/orderInfos?id=' + row.relation_id);
                }
            } else {
                // case 1 '销售出库'  2:  '领用出库'  3:'调拨出库'  4:  '积分商品出库'  5 '订单出库'
                if (row.type == 1) {
                    this.utils.goUrl('/orderInfo?id=' + row.relation_id);
                } else if (row.type == 2) {
                    this.utils.goUrl('/requisitionDetail?id=' + row.relation_id);
                } else if (row.type == 3) {
                    this.utils.goUrl('/goodsAllotInfo?id=' + row.relation_id);
                } else {
                    this.utils.goUrl('/orderInfos?id=' + row.relation_id);
                }
            }
        },
        handleClose(dom) {
            this.$refs['ruleForm'].resetFields();
            this.dialogVisible = false;
            dom && dom();
        },
        async repairGetList() {
            if (!this.bill_time_start) {
                this.bill_time_start = [];
            }
            this.paging.type = this.active * 1 + 1;
            this.paging.start_time = this.bill_time_start[0] || '';
            this.paging.end_time = this.bill_time_start[1] || '';
            let obj = Object.assign({}, this.paging);
            this.loading = true;
            let { code, data } = await this.$Http.stockReport(obj);
            this.loading = false;
            if (code) {
                this.tableData = data.data;
                this.paging.total = data.total;
                for (let o of this.tableData) {
                    o.price = Number(o.price).toFixed(2);
                }
            }
        },
        reset() {
            //重置
            this.paging = this.$options.data().paging;
            if (this.active == 5) {
                this.paging.sex_type = 353;
            }
            this.handleCurrentChange(1);
        },
        handleSizeChange(val) {
            this.paging.limit = val;
            this.repairGetList();
        },
        handleCurrentChange(val) {
            this.paging.page = val;
            this.repairGetList();
        },
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index == 0) {
                    sums[index] = '合计';
                    return;
                }
                const values = data.map((item) => Number(item[column.property]));
                if (column.property == 'early_warning_count' || column.property == 'count') {
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        if (!isNaN(value)) {
                            return prev + curr;
                        } else {
                            return prev;
                        }
                    }, 0);
                } else {
                    sums[index] = '';
                }
            });
            return sums;
        },
    },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
    width: 130px;
    height: 130px;
}

.divTable {
    width: 100%;

    div {
        border-bottom: 1px solid #ebeef5;
        border-left: 1px solid #ebeef5;
        border-right: 1px solid #ebeef5;
        height: 50px;
        line-height: 50px;
        padding-left: 30px;
    }
}
</style>
